<template>
  <div class="app-container">
    <el-card style="margin-bottom: 10px;
  font-weight: 800;
width:100%;">用户管理</el-card>
    <el-form ref="queryForm" :model="queryParams" :inline="true" class="formbox whitebg mb_15">
      <el-form-item prop="type">
        <el-select v-model="queryParams.type" size="small" placeholder="请选择状态" clearable
          style="width: 136px;height:30px;" @change="handleQuery">
          <el-option v-for="dict in typeList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="user_login">
        <el-input v-model="queryParams.user_login" style="width: 136px" placeholder="姓名/电话/QQ" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <template slot-scope>
          <div class="search" @click="searchUserInfo">
            <svg-icon class="searchIcon" class-name="feather-search" icon-class="feather-search" />
          </div>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" style="color:black;font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;"
          @click="userdialog = true">添加新成员</el-button>
      </el-form-item>
    </el-form>
    <div class="tablebox whitebg">
      <el-table v-loading="listLoading" :data="list" class="whitetable">
        <el-table-column label="序号" prop="id">
          <template slot-scope="scope">
          
            <span>{{
                (queryParams.page - 1) * queryParams.num + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="user_login" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.user_status == 1">
              <span class="primarydot" />正常
            </div>
            <div v-else><span class="primarydot reddot" />禁用</div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="操作" fixed="right" width="260">
          <template slot-scope="scope">
            <div class="flex btnflex">
              <div class="commhover btn_textblue mb_10" @click="handleEdit(scope.row)">
                编辑
              </div>
              <span style="padding: 0 10px; width: 1px; height: 100%" />
              <div style="padding: auto 5px;text-decoration:underline;" class="commhover btn_textred mb_10"
                @click="handlePass(scope.row, 2)">
                重置密码
              </div>
              <span style="padding: 0 10px; width: 1px; height: 100%" />
              <div v-if="scope.row.user_status == 1" style="padding: auto 5px" class="commhover btn_textblue mb_10"
                @click="handleStatus(scope.row, scope.row.user_status)">
                设为无效
              </div>
              <div v-else class="commhover btn_textblue mb_10" @click="handleStatus(scope.row, scope.row.user_status)">
                应用
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.num"
        @pagination="getList" />
    </div>
    <!-- <el-dialog  title="添加新成员" :close-on-click-modal="false" :visible.sync="userdialog"  width="620px" append-to-body>
      <user-dialog v-if="userdialog" :type="type"  :user="rowinfo" @close="handleClose" />
    </el-dialog> -->
    <el-drawer title="新增用户" class="addArawer" size="453px" modal :visible.sync="userdialog" direction="rtl"
      :before-close="btnHandleClose">
      <user-dialog v-if="userdialog"  @close="handleClose" />
    </el-drawer>

    <!-- <el-dialog title="编辑用户信息" :close-on-click-modal="false" :visible.sync="passdialog" width="520px" append-to-body>
      <pass-dialog v-if="passdialog" :user="rowinfo" @close="handlePassClose" />
    </el-dialog> -->
    <el-drawer title="重置密码"  size="453px" modal class="mydrawer" :visible.sync="passdialog" direction="rtl"
      :before-close="btnHandleClose">
      <pass-dialog v-if="passdialog" :user="rowinfo" @close="handlePassClose" />
    </el-drawer>
  </div>
</template>

<script>
import PartComp from '@/components/PartComp'
import UserDialog from './components/UserDialog.vue'
import PassDialog from './components/PassDialog.vue'
import { getUserList, userOpen, userBan } from '@/api/user'
export default {
  components: {
    UserDialog,
    PassDialog,
    PartComp
  },
  data() {
    return {
      // 自定义状态
      typeList: [
        { name: '禁用', id: 0 },
        { name: '正常', id: 1 },
        // { name: '未验证', id: 2 }
      ],
      queryParams: {
        page: 1,
        num: 10,
        type: '', //状态 是否为 禁用和开放
        user_login: ''
      },
      listLoading: false, // 加载效果
      list: [{ id: 1, username: '张三', type: 1 }],
      total: 0, //总条数
      userdialog: false, //添加用户抽屉
      rowinfo: null, //用户信息
      passdialog:false //修改用户密码抽屉
    }
  },

  created() {
    this.getList()
  },

  methods: {
    // 获取所有数据，赋值 页数和每页数量
    getList() {
      this.listLoading = true
      const params = {
        page: this.queryParams.page,
        num: this.queryParams.num
      }
      if (this.queryParams.user_login) {
        params.user_login = this.queryParams.user_login
      }
      if (this.queryParams.type || this.queryParams.type === 0) {
        params.type = this.queryParams.type
      }
      getUserList(params)
        .then((res) => {
          console.log(res);
          this.listLoading = false
          this.list = res.data.list
          this.total = res.data.count
        })
        .catch(() => {
          this.listLoading = false
        })
    },

    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },

    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    handleAdd() {
      this.userdialog = true
    },

// 叉叉按钮
   btnHandleClose(){
   this.$confirm('确认关闭？').then(()=>{
    this.userdialog = false
      this.passdialog = false
   })
},
    // 添加按钮
    handleClose(type) {
        this.getList()
        this.userdialog = type
        this.passdialog = type
        },
   

    // 编辑按钮
    handleEdit(row) {
      console.log(row);
      // 编辑时传数据
      this.rowinfo = row
      // this.passdialog = true
    },

// 
    handlePassClose(status) {
        this.getList() 
          this.passdialog = status    
    },

    handleStatus(row, type) {
      console.log(row);
      console.log(type);
      const info = type == 0 ? '启用' : '禁用'
      this.$confirm('确定' + info + '该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (info == '启用') {
            console.log('启用');
            userBan({ id: row.id }).then((res) => {
              console.log(res.code+'-----启用数据');
              if (res.code === 1) {
                this.$message.success('启用成功')
                this.getList()
              }
            })
          } else {
            userOpen({ id: row.id }).then((res) => {
            console.log( res.code+'----------禁用');
              if (res.code === 1) {
                this.$message.success('禁用成功')
                this.getList()
              }
            })
          }
        })
        .catch(() => { })
    },
    // 重置密码
    handlePass(row){
      this.rowinfo = row
      this.passdialog = true
    },
    searchUserInfo(){

    }
  }
   }

</script>

<style lang="scss" scoped>
.formbox {
  border-radius: 5px;
  padding: 15px 15px 0 15px;
  width: 100%;
}

.primarydot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: #1168eb;
}

.reddot {
  background-color: #e63737;

}

.search {
  width: 30px;
  margin-top: 2px;
  padding-left: 8px;
  height: 30px;
  background: #9FABF8;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}

.searchIcon {
  margin-bottom: 3px;
}

.btnflex {
  .line {
    display: inline-block;
    margin: 0 10px;
  }
}

::v-deep .el-form-item:last-child .el-form-item__content {
  position: absolute;
  right: 27px;
}
</style>
